<template>
  <div class="container">
    <div :id="id" :option="option" :style="{height:height,width:width}"></div>
  </div>
</template>
<script>

import HighCharts from "highcharts";
export default {
  props:{
    id: {
      type: String,
      required: true
    },
    chartData: {
      type: Array,
      required: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
  },
  data() {
    return {
      option: {},
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.init(val)
      }
    }
  },

  mounted() {
    this.init(this.chartData);
    console.log("这个",this.chartData)
  },
  methods: {
    init(data) {
      this.option = {
        chart: {
          type: "pie", //饼图
          // width: 360,
          // height: 200,
          color: "transparent",
          backgroundColor: "transparent",
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //x轴-3d偏转角度（类似于倾斜角度）
            beta: 0,//y轴-偏转角度
            frame: {
              // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
              // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
              // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
              bottom: {
                size: 1,
                color: "transparent",
              },
              side: {
                size: 1,
                color: "transparent",
              },
              back: {
                size: 1,
                color: "transparent",
              },
            },
          },
        },
        title: {
          text: "", //图表的标题文字
          style: {
            fontSize: 10, //字体大小
            color: "#C7DDFF", //字体颜色
          },
        },
        credits: {
          enabled: false, // 禁用版权信息
        },

        subtitle: {
          text: "", //副标题文字
        },
        colors: ["#0783FA", "#67E364", "#FFD15C","#B5C706","#76D305","#00EB43","#00F78C","#00ECB8","#00B6DF","#003EB4","#0018FE","#5B00F4","#48008B","#ffffff"],
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 25, //饼图的厚度
            dataLabels: {
              distance: 4,
				      zIndex:9999,
              enabled: true,
              style:{
                fontSize:10,
                color:"#C7DDFF"

              }
            },
          },
        },
        legend: {
          // align: "right", //水平方向位置
          // verticalAlign: "bottom", //垂直方向位置
          // layout: "vertical",
          x: 20,
          y: 20,
          // symbolWidth: 10,
          // symbolHeight: 10,
          symbolRadius: 0,
          itemStyle: {
            color: "#C7DDFF",
            fontSize: 10,
          },
        },

        series: [
          {
            type: "pie",
            name: "", //统一的前置词,非必须
            showInLegend: true,
            size: "140%",
            data: data
          },
        ],
      };
      HighCharts.chart(this.id, this.option);
    },
  },
};
</script>

<style scoped>
/* 容器 */
.container {
  width: 362px;
  height: 200px;
}
</style>
